<template>
  <div>
    <div class="head-all" ><cmHeader id='3'></cmHeader></div>
    <div class="banner f-tb"><div>分析</div> <div>Analysis</div></div>
    <div class="minWidth">
      <!--统计分析-->
      <div class="title-wrapper flex "><img src="../../assets/commonImg/fenxi201974.png" alt="">分析统计 </div>
      <div class="text-title"> 条件选择：</div>
<!--选择组件-->
      <selectCGList></selectCGList>
      <div class="text-title"> 成功汇总：</div>
      <!--成果汇总表格-->
      <div class="table-all">
        <ul class="flex">
          <li class="empty"></li>
          <li class="flex1">全部</li>
          <li class="flex1">科研</li>
          <li class="flex1">应用</li>
        </ul>
      </div>
      <div class=" table-all table-all-info">
        <ul class="flex">
          <li class="empty"> 数量</li>
          <li class="flex1">3565656</li>
          <li class="flex1">12000</li>
          <li class="flex1">456456</li>
        </ul>
      </div>

      <!--操作分析-->
      <div class="title-wrapper flex "><img src="../../assets/commonImg/fenxi201974.png" alt="">操作分析 </div>
      <div class="choose-time flex ">
        <div class="flex100 text-center"> 时间选择：</div>
        <ul class="flex">
          <li class="flex1 f-zhong"><span @click="do_selectTime(0)" class="f-zhong text-center" :class="timeSelect==0?'timeActive':''">今日</span></li>
          <li class="flex1 f-zhong"><span @click="do_selectTime(1)" class="f-zhong text-center" :class="timeSelect==1?'timeActive':''">本月</span></li>
          <li class="flex1 f-zhong"><span @click="do_selectTime(2)" class="f-zhong text-center" :class="timeSelect==2?'timeActive':''">本年</span></li>
        </ul>
        <div class="laydate flex">
          <span>自定义时间</span><input type="text" id="timeStart" v-model="timeStart"><span>到</span><input v-model="timeEnd" type="text" id="timeEnd">
        </div>
      </div>
      <!--时间塞选下面表格-->
      <div class="table-all">
        <ul class="flex">
          <li class="empty empty2"></li>
          <li class="flex1">点击</li>
          <li class="flex1">登录</li>
          <li class="flex1">搜索</li>
          <li class="flex1">入库</li>
          <li class="flex1">评价</li>
          <li class="flex1">应用</li>
          <li class="flex1">注册</li>
        </ul>
      </div>
      <div class=" table-all table-all-info">
        <ul class="flex">
          <li class="empty empty2"> 数量</li>
          <li class="flex1">3565656</li>
          <li class="flex1">12000</li>
          <li class="flex1">456456</li>
          <li class="flex1">456456</li>
          <li class="flex1">456456</li>
          <li class="flex1">456456</li>
          <li class="flex1">456456</li>

        </ul>
      </div>
      <!--图标-->
      <div class="chartWrapper">
        <div class="remark flex">
          <ul class="flex">
            <li> 点击</li>
            <li> 收藏</li>
            <li> 入库</li>
            <li> 登录</li>
            <li> 评价</li>
            <li> 应用</li>
            <li> 注册</li>
          </ul>
        </div>
        <div class="chart" id="chart1"></div>
      </div>
    </div>

    <!--页脚-->
    <div class="foot ">
      <zcFooter></zcFooter>
    </div>
    <!--弹出层-->
    <transition name="fade">
      <confirm
        :title=mistakeTitle
        confirm="确定"
        :msg=mistakeMsg
        @confirm1="def_mistake($event)"
        v-if="mistake"
      ></confirm>
    </transition>
    <transition name="fade">
      <makeSure
        :titleConfirm="titleConfirm"
        :msgConfirm='makeSureMsg'
        v-if="confirm"
        @sure="def_makeSure($event)"
        @giveUp="def_giveUp($event)"
      ></makeSure>
    </transition>
  </div>


</template>

<script>
  import cmHeader from '../common/cm_header'
  import selectCGList from '../common/cm_selectCGList'
  import zcFooter from '../common/zcFooter'
  import makeSure from '../common/cm_makeSure'
  import confirm from '../common/cm_confirm'
    export default {
        name: "yw_cgkAnalyse",

      components:{
        cmHeader,
        selectCGList,
        zcFooter,
        makeSure,
        confirm
      },
      data(){
          return{
            mistakeTitle:"错误",//弹出确认框
            mistake:false,
            mistakeMsg:'风口呢可能风能风口呢可能风呢可能',
            makeSureMsg:'风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能',//弹出选择模态框
            confirm:false,
            timeSelect:0,
            laydate: window.laydate, //获取全局的laydate，带入到组件中
            timeStart:'',
            timeEnd:''
          }
      },
created(){
          window.scrollTo(0,0)
},
      methods:{
        /*错误框函数*/
        def_mistake(){
          // alert(99)
          this.mistake=false
        },
        /*提醒选择框确认*/
        def_makeSure(){
          this.confirm=false
        },
        /*
        * 提醒选择框取消*/
        def_giveUp(){
          this.confirm=false
        },
        do_selectTime(index){
          this.timeSelect=index
        }
      },
      mounted() {
        this.$chart.line1('chart1');
        // this.$chart.line2('chart1');
          this.$nextTick(()=>{
            this.laydate.render({
              elem: '#timeStart',
              format: 'yyyy-MM-dd',
              done: (value) => {
                this.timeStart = value
              }
            });
            this.laydate.render({
              elem: '#timeEnd',
              format: 'yyyy-MM-dd',
              done: (value) => {
                this.timeEnd = value
              }
            });
          })

      }
    }
</script>

<style scoped>
  @import "../../common/css/banner.css";
.banner{
  background: url("../../assets/commonImg/bannerAnalyse201974.png") center center no-repeat;
  background-size: 100% 100%;
}

  .title-wrapper{
    margin-top: 30px;
    height: 40px;
    align-items: center;
    background-color: white;
    border-left: 2px solid #418DFD;
    border-top: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
    color: grey;
  }
  .title-wrapper img{
    width: 20px;
    height: 20px;
    margin: 0 10px;
  }
  .text-title{
    height: 65px;
    line-height: 65px;
    color: #418DFD;
  }
  .table-all{
    background-color: #DBEAFF;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .table-all .empty{
    width: 150px;
  }
  .table-all li{
    border-left: 1px solid white;
    color: grey;
  }
  .table-all-info{
    background-color: white;
    height: 80px;
    line-height: 80px;
  }
  .table-all-info li{
    border-left: 1px solid #F2F2F2;
  }
  .table-all-info li:first-child, .table-all li:first-child{
    border: none;
  }
  .choose-time{
    height: 80px;
    line-height: 80px;
    align-items: center;
  }
  .choose-time>div:first-child{
    width: 100px;
  }
  .choose-time ul{
    width: 270px;
    height: 100%;
    margin-bottom: 0;
  }
  .choose-time ul li span{
    display: inline-block;
    width: 70px;
    height: 26px;
    line-height: 26px;
    cursor: pointer;
    border-radius: 2px;
    color: grey;
  }
  .choose-time ul li .timeActive{
    color: white;
    background-color: #418DFD;
  }
.laydate{
  align-items: center;
  color: grey;
  margin-left: 30px;
}
  .laydate  input{
    height: 30px;
    line-height: 30px;
    margin: 0 10px;
  }
  .table-all .empty2{
    width: 80px;
  }
  .chart{
    width: 100%;
    height: 400px;
    background-color: white;
    margin-bottom: 50px;
  }
  .chartWrapper>div:first-child{
    height: 60px;
    line-height: 60px;
    text-align: right;
  }

  .remark ul{
    margin-left: auto;
  }
  .remark ul li{
    width: 75px;
    height: 60px;
    line-height: 80px;
    text-align: center;
    font-size: 14px;
    position: relative;
    color: grey;
  }
  .remark ul li:before{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #418DFD;
    border-radius: 50%;
    top: 50%;
    margin-top: 5px;
    left: 9px;
  }
  .remark ul li:nth-of-type(1):before{
    background-color: #6D6EFA;
  }
  .remark ul li:nth-of-type(2):before{
    background-color: #CB6ACB;
  }
  .remark ul li:nth-child(3):before{
    background-color: #25BE8A;
  }
  .remark ul li:nth-child(4):before{
    background-color: #408CFF;
  }
  .remark ul li:nth-child(5):before{
    background-color: #FCA35E;
  }
  .remark ul li:nth-child(6):before{
    background-color: #3EC4FC;
  }
  .remark ul li:nth-child(7):before{
    background-color: #FEC943;
  }
</style>
